<template>
	<view class="tabbar">
		<view class="tabbar-button" :class="{ active: current == 'Home' }" @click="changeTab('Home')">
			<image v-if="current == 'Home'" src="/static/imgs/tabbar/Home-active.png" />
			<image v-else src="/static/imgs/tabbar/Home.png" />
			<text>Home</text>
		</view>
		<view class="tabbar-button" :class="{ active: current == 'Explore' }" @click="changeTab('Explore')">
			<image v-if="current == 'Explore'" src="/static/imgs/tabbar/Explore-active.png" />
			<image v-else src="/static/imgs/tabbar/Explore.png" />
			<text>Explore</text>
		</view>
		<view class="tabbar-button add-button" @click="changeMenuShow">
			<view class="add-round">
				<image src="/static/imgs/tabbar/Send.png" />
			</view>
		</view>
		<view class="tabbar-button" :class="{ active: current == 'Portfolio' }" @click="changeTab('Portfolio')">
			<image v-if="current == 'Portfolio'" src="/static/imgs/tabbar/Portfolio-active.png" />
			<image v-else src="/static/imgs/tabbar/Portfolio.png" />
			<text>Portfolio</text>
		</view>
		<view class="tabbar-button" :class="{ active: current == 'Profile' }" @click="changeTab('Profile')">
			<image v-if="current == 'Profile'" src="/static/imgs/tabbar/Profile-active.png" />
			<image v-else src="/static/imgs/tabbar/Profile.png" />
			<text>Profile</text>
		</view>
	</view>
	<view class="menu" :class="{ active: isMenu }">
		<view class="menu-button" @click="selectMenu('plan')"> Make your plan </view>
		<view class="menu-button" @click="selectMenu('post')"> Create a post </view>
		<!-- 		<view class="menu-button" @click="selectMenu('history')">
			HISTORY
		</view> -->
	</view>
</template>

<script setup name="Tabbar">
	import { ref } from 'vue';

	import { navigateTo } from '@/utils/index.js';

	import useUserStore from '@/store/user.js';

	import { storeToRefs } from 'pinia';

	// 从用户存储模块中引入当前用户状态
	const { current } = storeToRefs(useUserStore());

	// 用于控制菜单显示状态的ref
	const isMenu = ref(false);

	/**
	 * 切换当前标签页
	 * @param {string} tab 需要切换到的标签页名称
	 */
	const changeTab = (tab) => {
		current.value = tab;

		// 根据标签页名称导航到相应页面
		navigateTo(`/pages/${tab.toLowerCase()}/index`);
	};

	/**
	 * 切换菜单的显示与隐藏
	 */
	const changeMenuShow = () => {
		// 切换isMenu的值以控制菜单的显示与隐藏
		isMenu.value = !isMenu.value;
	};

	/**
	 * 选择菜单项
	 * @param {string} menu 被选择的菜单项
	 */
	const selectMenu = (menu) => {
		console.log(menu);
		// 根据菜单项的不同，导航到不同的页面
		if (menu == 'post') {
			navigateTo('/pages/explore/create');
		}
		if (menu == 'plan') {
			navigateTo('/pages/plan/index');
		}
		// 隐藏菜单
		isMenu.value = false;
	};
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 40rpx;
		margin: auto;
		width: 576rpx;
		height: 110rpx;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6rpx;
		border-radius: 20rpx;

		&-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			cursor: pointer;
			width: 100%;
			height: 100%;

			&.active {
				text {
					color: #ffffff;
				}
			}

			image {
				width: 42rpx;
				height: 42rpx;
			}

			text {
				color: #878787;
				font-family: 'PINGFANG-REGULAR';
				font-size: 20rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}

			&.add-button {
				position: relative;
			}
		}
	}

	.add-round {
		position: absolute;
		top: -40rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #b8cef6;
		box-shadow: 0 0 0rpx 14rpx #ffffff inset;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.menu {
		position: fixed;
		bottom: 190rpx;
		width: 100%;
		height: 0rpx;
		background-color: #000000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		gap: 15rpx;
		transition: all 0.25s;
		overflow: hidden;

		&.active {
			height: 400rpx;
		}

		&-button {
			width: 670rpx;
			height: 130rpx;
			background-color: rgba(184, 206, 246, 0.5);
			border-radius: 13.95rpx;
			color: #ffffff;
			text-align: center;
			line-height: 130rpx;
			font-family: 'PINGFANG-BOLD';
			font-size: 41.86rpx;
			font-style: normal;
			font-weight: 600;
			cursor: pointer;
		}
	}
</style>
